<template>
  <view class="address-list">
    <!-- 地址列表 -->
    <view class="address-items">
      <view class="address-item" v-for="(item, index) in addressList" :key="item.id" @tap="selectAddress(item)">
        <view class="address-content">
          <view class="location">
            <text class="area">{{ item.regionName }}</text>
          </view>
          <view class="detail">{{ item.address }}</view>
          <view class="contact">
            <view class="user-info">
              <text class="name">{{ item.contactName }}</text>
              <text class="phone">{{ item.contactPhone }}</text>
            </view>
            <view class="tag" v-if="item.isDefault === 1">
              <wd-tag type="warning" size="small">默认</wd-tag>
            </view>
          </view>
        </view>
        <view class="operate">
          <view class="edit" @tap.stop="handleEdit(item)">
            <wd-icon name="edit" size="36rpx" />
          </view>
          <view class="delete" @tap.stop="handleDeleteAddress(item)">
            <wd-icon name="delete" size="36rpx" />
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-if="addressList.length === 0">
      <view class="empty-content">
        <wd-icon name="cart" size="80rpx" color="#999" />
        <text class="empty-text">暂无收货地址</text>
      </view>
    </view>

    <!-- 底部添加按钮 -->
    <view class="bottom-button">
      <wd-button type="primary" block @click="addAddress">新增收货地址</wd-button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { getAddressList, deleteAddress } from '@/api/address'
import { onShow } from '@dcloudio/uni-app'

const addressList = ref([])

// 获取地址列表
const fetchAddressList = async () => {
  try {
    const data = await getAddressList()
    addressList.value = data
  } catch (error) {
    uni.showToast({
      title: '获取地址列表失败',
      icon: 'none'
    })
  }
}

// 使用 onShow 生命周期
onShow( async () => {
  await fetchAddressList()
})

const selectAddress = (address) => {
  // 将事件名从 'selectAddress' 改为 'updateAddress' 以匹配 checkout.vue 中的监听
  uni.$emit('updateAddress', {
    id: address.id,
    name: address.contactName,
    phone: address.contactPhone,
    fullAddress: `${address.regionName}${address.address}`
  })
  uni.navigateBack()
}

const handleEdit = (address) => {
  // 将地址对象转换为字符串并编码
  const addressStr = encodeURIComponent(JSON.stringify(address))
  uni.navigateTo({
    url: `/pages/address/edit?address=${addressStr}`
  })
}

const handleDeleteAddress = (address) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await deleteAddress(address.id)
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          // 重新获取地址列表
          fetchAddressList()
        } catch (error) {
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

const addAddress = () => {
  uni.navigateTo({
    url: '/pages/address/edit'
  })
}
</script>

<style lang="scss">
.address-list {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 120rpx;
}

.address-items {
  padding: 20rpx;
  
  .address-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    
    .address-content {
      flex: 1;
      margin-right: 20rpx;
      
      .location {
        .area {
          font-size: 26rpx;
          color: #666;
        }
      }
      
      .detail {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
        margin: 12rpx 0;
      }
      
      .contact {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .user-info {
          font-size: 26rpx;
          color: #666;
          
          .name {
            margin-right: 20rpx;
          }
        }
      }
    }
    
    .operate {
      display: flex;
      align-items: center;
      
      .edit, .delete {
        padding: 10rpx;
        margin-left: 20rpx;
      }
    }
  }
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.empty {
  padding: 120rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .empty-content {
    text-align: center;
    
    .wd-icon {
      margin-bottom: 20rpx;
    }
    
    .empty-text {
      display: block;
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style> 